import React from 'react';
import './category-selector.scss';

// 调用商品的接口 把品类的请求接口也放到商品server里
import MUtil from 'util/mm.js';
import Product from 'servers/product-server.js';

const _product = new Product();
const _mm = new MUtil();

// 品类选择器
class CategorSelector  extends React.Component {
    constructor(props){
        super(props);
        this.state={
            firstCategoryList  :[], //一级品类的列表
            firstCategoryId    :0,
            secondCategoryList :[],
            secondCategoryId   :0

        }
    }
     
    componentDidMount(){
        this.loadFirstCategory();
    }
    //加载一级分类
    loadFirstCategory(){

        _product.getCategoryList().then(res =>{ 
            this.setState({ 
                firstCategoryList : res
            });
        },errMsg =>{
            _mm.errorTips(errMsg);
        })
    } 
    // 加载二级分类
    loadSecondCategory(){
        _product.getCategoryList(this.state.firstCategoryId).then(res =>{ 
            this.setState({ 
                secondCategoryList : res
            });
        },errMsg =>{
            _mm.errorTips(errMsg);
        })
    }
    // 加载一级品类的变化
    // 选择一级品类
    onFirstCategoryChange(e){
        let newValue = e.target.value || 0 ;
        // 记住 setState是异步操作
        this.setState({
            firstCategoryId   : newValue,
            secondCategoryId  :0,
            secondCategoryList:[]
        },()=>{
            // 更新二级陪你品类
            this.loadSecondCategory();
            // 暴露一级品类
            this.onPropsCategoryChange()
        })
    }
    // 选着二级品类
    onSecondCategoryChange(e){
        let newValue = e.target.value || 0 ;
        // 记住 setState是异步操作
        this.setState({
            secondCategoryId   : newValue
        },()=>{
                // 传给父组件选中的结果 
            this.onPropsCategoryChange()
        })
    }
    // 传给父组件选中的结果 
    onPropsCategoryChange(){
        // 判断 props 里的回掉函数存在
        let categoryChangable = typeof this.props.onCategoryChange === 'function' ;
        // 判断是否有二级品类
        if(this.state.secondCategoryId){
            // 这是把二级品类的值传给父级组件
            categoryChangable && this.props.onCategoryChange(this.state.secondCategoryId,this.state.firstCategoryId);
        }else{
            // 直接把一级品类的值传给父级组件
            categoryChangable && this.props.onCategoryChange(this.state.firstCategoryId,0);
        }
    }
    render() { 
        return (
            <div>
                <div className="col-md-10">
                    <select  className="form-control cate-select" 
                        onChange={(e)=> this.onFirstCategoryChange(e)}
                    >
                        <option value="">请选择一级分类</option>
                        {
                            this.state.firstCategoryList.map(
                                (category, index) => <option value={category.id} key={index}>{category.name}</option>
                            )
                        }
                    </select>
                   {  this.state.secondCategoryList.length ?
                    (<select   className="form-control cate-select" 
                    onChange={(e)=> this.onSecondCategoryChange(e)}
                    >
                        <option value="">请选择二级分类</option>
                        {
                            this.state.secondCategoryList.map(
                                (category, index)=> <option value={category.id} key={index}>{category.name}</option>
                                )
                        }
                    </select>): null
                   }
                </div>
            </div>
        );
 



    }
}
export default CategorSelector